<template>
    <div class="detail-box">
        <nut-swiper :init-page="page" pagination-visible pagination-color="#F0A83F"
            pagination-unselected-color="#EAE5DF" auto-play="3000">
            <nut-swiper-item v-for="item in list" :key="item">
                <img :src="item" alt="" style="width: 100%;" />
            </nut-swiper-item>
        </nut-swiper>
        <div class="content">
            <div class="title flex-a flex-b">
                <div class="left">
                    <nut-price :price="price" size="large" />
                    <!-- <nut-price :price="278" size="normal" :decimal-digits="0" strike-through /> -->
                </div>
                <div class="num">
                    <!-- 预约：200 -->
                </div>
            </div>
            <div class="name">{{ detail.project_Name }}</div>
            <div class="info"></div>
        </div>
        <!-- <div class="content">
            <div class="rows flex-a">
                <div class="sort">服务类别</div>
                <div class="server flex-a flex-b" @click="selCategory">
                    <span>{{ serviceList[0].name || '请选择服务类别' }}</span>
                    <Right size="12" color="#999" />
                </div>
            </div>
        </div> -->
        <div class="content">
            <div class="rows flex-a">
                <div class="sort flex-a"><img src="https://cxj.szzkba.cn/upload/i/2024/09/26/102735_1.png"
                        alt=""><text>套餐选择</text></div>
                <div class="server flex-a flex-b" @click="selThali">
                    <span>{{ mealActive >= 0 ? mealList[mealActive].project_Name : '请选择套餐' }}</span>
                    <Right size="12" color="#C6C6C6" />
                </div>
            </div>
        </div>
        <div class="content" v-if="mealActive >= 0">
            <div class="rows flex-a">
                <div class="sort"><img src="https://cxj.szzkba.cn/upload/i/2024/11/13/162651.png" alt=""><text>{{
                    detail.category == '1' ? '服务时长' : '数量' }}</text></div>
                <div class="server flex-a flex-b">
                    <span>{{ detail.category == '1' ? num * 60 + '&nbsp;分钟' : num }}</span>
                    <!-- <Right size="12" color="#999" /> -->
                </div>
            </div>
        </div>
        <div class="content">
            <div class="rows flex-a">
                <div class="sort flex-a"><img src="https://cxj.szzkba.cn/upload/i/2024/09/26/102735.png"
                        alt=""><text>服务人员</text></div>
                <div class="server flex-a flex-b" @click="showPeople">
                    <span v-if="currentUser.user_Nickname" class="head-img flex-a">
                        <img :src="currentUser.image_Url" alt="">
                        <span>{{
                            currentUser.user_Nickname
                            }}</span>
                    </span>
                    <span v-else>请选择服务人员</span>
                    <Right size="12" color="#C6C6C6" />
                </div>
            </div>
        </div>
        <div class="content">
            <nut-tabs v-model="tab" background="#ffffff">
                <nut-tab-pane title="商品详情" pane-key="0">
                    <div class="content">
                        <!-- <div class="detail-title">详情</div> -->
                        <div class="detail-content">
                            <rich-text :nodes="detail.prj_info"></rich-text>
                        </div>
                    </div>
                </nut-tab-pane>
                <nut-tab-pane title="评价" pane-key="1">
                    <div class="">
                        <!-- <div class="evaluate flex-a">
                        <div class="sort">服务评价</div>
                        <div class="server flex-a flex-b">
                            <span>最近已有{{ commontList.length }}条评价</span>
                            <Right size="12" color="#999" />
                        </div>
                    </div> -->
                        <div class="eval-list">
                            <div class="eval-item" v-for="item in commontList" :key="item.ID">
                                <div class="head flex-a flex-b">
                                    <div class="avatar flex-a">
                                        <img :src="item.sysUser.headerImg" alt="">
                                        <div class="nick">
                                            <div>{{ item.sysUser.nickName }}</div>
                                        </div>
                                    </div>
                                    <div class="time">{{ item.CreatedAt }}</div>
                                </div>
                                <div class="spec flex-a">
                                    <div>服务类别：上门费</div>
                                    <div>套餐：默认</div>
                                </div>
                                <div class="box">
                                    <div class="text">{{ item.shareContent }}</div>
                                    <div class="star flex-a">
                                        <nut-rate v-model="value" allow-half active-color="#F6B125" />
                                    </div>
                                    <div class="imgs" v-if="item.shareType == '1'" @click="showFn(item)">
                                        <img :src="ele" alt="" v-for="ele in item.shareUrl">
                                    </div>
                                    <div class="imgs" v-if="item.shareType == '2'">
                                        <video id="video" style="width: 50%;height:110px;" :src="item.shareUrl"
                                            initial-time="0" :controls="true" :autoplay="false" :loop="false"
                                            :muted="false" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </nut-tab-pane>
            </nut-tabs>
        </div>
        <nut-button color="#F0A93F" block @click="toOrder" class="sub-btn">立即预约</nut-button>
        <nut-image-preview :pagination-visible="false" :show="showPreview" :images="imgData" @close="hideFn" />
        <nut-popup v-model:visible="showBottom" position="bottom" closeable round :style="{ height: '65%' }">
            <div class="dialog-box">
                <div class="title">选择套餐</div>
                <div class="product flex-a flex-b">
                    <div class="flex-a">
                        <div><img :src="detail.remark" alt=""></div>
                        <div class="name">{{ detail.project_Name }}</div>
                    </div>
                    <div class="price">{{ '￥' + price }}</div>
                </div>
                <div class="service">
                    <div class="ser-title">服务类别</div>
                    <div class="ser-list">
                        <!-- <div :class="serviceActive == index ? 'ser-item active' : 'active ser-item'"
                            v-for="(item, index) in serviceList" @click="selService(item, index)">{{ item.name }}
                        </div> -->
                        <div :class="serviceActive == index ? 'ser-item active' : 'active ser-item'">
                            {{ detail.category == '1' ? '钟点服务' : '上门费' }}
                        </div>
                    </div>
                </div>
                <div class="meal">
                    <div class="meal-title">套餐选择</div>
                    <div class="meal-list">
                        <div :class="mealActive == index ? 'meal-item active' : 'meal-item'"
                            v-for="(item, index) in mealList" @click="selMeal(item, index)">
                            {{ item.project_Name }}
                        </div>
                    </div>
                </div>
                <div class="type-list">
                    <div class="type-title">基本信息</div>
                    <nut-form ref="formRef" :model-value="orderServiceContent">
                        <block v-for="(item, index) in inputA">
                            <nut-form-item :label="item.typeName" :prop="item.typeCol" :required="item.typeRule == '1'"
                                :rules="[{ required: true, message: '请输入' }]">
                                <nut-input v-model="orderServiceContent[item.typeCol]"
                                    :placeholder="'请输入' + item.typeRemark" type="text"
                                    @blur="customBlurValidate(item.typeCol)" />
                            </nut-form-item>
                        </block>
                        <block v-for="(item, index) in uploadA">
                            <nut-form-item :label="item.typeName" :prop="item.typeCol" :required="item.typeRule == '1'"
                                :rules="[{ required: true, message: '请上传图片' }]">
                                <nut-uploader :url="uploadUrl" v-model:file-list="fileList" accept="image/*"
                                    @success="data => picSucc(data, item)" maximum="1" multiple>
                                </nut-uploader>
                            </nut-form-item>
                        </block>
                    </nut-form>
                </div>
                <div class="add-num">
                    <div>购买数量</div>
                    <nut-input-number v-model="num" :button-size="30" :input-width="50" :min="mini_Count"
                        @change="changeNum" />
                </div>
                <nut-button color="#F0A93F" block @click="submitOrder">确认选择</nut-button>
            </div>
        </nut-popup>
        <nut-popup v-model:visible="peopleBottom" position="bottom" closeable round :style="{ height: '80%' }">
            <div class="dialog-box">
                <div class="select-people">
                    <div class="people-title">选择服务人员</div>
                    <div v-for="(item, index) in peopleList" class="people-item">
                        <div class="flex-a people-box">
                            <div class="img"
                                @click="jumpTo('/packageA/pages/people/index?user_ID=' + item.user_ID + '&index=' + index + '&id=' + id + '&mealActive=' + mealActive)">
                                <img :src="item.image_Url" alt="">
                            </div>
                            <div>
                                <div class="flex-a">
                                    <div class="name">{{ item.user_Nickname }}</div>
                                    <div class="flex-a level">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png"
                                            v-if="item.level == '1'" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png"
                                            v-if="item.level == '2'" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png"
                                            v-if="item.level == '3'" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png"
                                            v-if="item.level == '4'" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png"
                                            v-if="item.level == '5'" alt="">
                                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png"
                                            v-if="item.level == '6'" alt="">
                                        <span :class="'c' + item.level">{{ item.level == '1' ? '小白' :
                                            item.level
                                                == '2'
                                                ? '初级' : item.level == '3' ? '中级' : item.level == '4'
                                                    ? '高级' : item.level == '5' ? '特级' : item.level == '6' ? '明星' :
                                                        ''
                                            }}</span>
                                    </div>
                                </div>
                                <div class="num">获得0个好评</div>
                            </div>
                        </div>
                        <div :class="item.show == false ? 'user-info-box' : 'user-info-box active'">
                            <div :class="item.show == false ? 'user-info' : 'user-info active'">
                                "&nbsp;{{
                                    item.user_Enterts
                                }}&nbsp;"
                            </div>
                            <span @click="open(index)">{{ item.show == false ? '展开' : '收起' }}</span>
                        </div>
                        <div class="btn-box">
                            <nut-button color="#F0A93F" size="mini" @click="selPeople(item, index)">选择Ta</nut-button>
                        </div>
                        <!-- <nut-row>
                            <nut-col :span="8">
                                <div class="avatar">
                                    <image class="avatarImage2" :src="item.image_Url">
                                    </image>
                                </div>
                            </nut-col>
                            <nut-col :span="16" style="">
                                <nut-row>
                                    <nut-col :span="18">
                                        <div
                                            style="display: flex; margin-right: 5%;align-items: center;margin-top: 10%;">
                                            <text style="font-size: 20px;font-weight: bold;margin-right: 5%;">{{
                                                item.user_Nickname
                                                }}</text>
                                            <div class="flex-a level">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png"
                                                    v-if="item.level == '1'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png"
                                                    v-if="item.level == '2'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png"
                                                    v-if="item.level == '3'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png"
                                                    v-if="item.level == '4'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png"
                                                    v-if="item.level == '5'" alt="">
                                                <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png"
                                                    v-if="item.level == '6'" alt="">
                                                <span :class="'c' + item.level">{{ item.level == '1' ? '小白' :
                                                    item.level
                                                    == '2'
                                                    ? '初级' : item.level == '3' ? '中级' : item.level == '4'
                                                    ? '高级' : item.level == '5' ? '特级' : item.level == '6' ? '明星' :
                                                    ''
                                                    }}</span>
                                            </div>
                                        </div>
                                    </nut-col>
                                </nut-row>
                                <nut-row>
                                    <div class="user-info-box">
                                        <div :class="item.show == false ? 'user-info' : 'user-info active'">
                                            "&nbsp;{{
                                            item.user_Enterts
                                            }}&nbsp;"
                                        </div>
                                        <span @click="open(index)">{{ item.show == false ? '展开' : '收起' }}</span>
                                    </div>
                                </nut-row>
                                <nut-row>
                                    <div style="display: flex; margin:0 5% 0 0;align-items: center;">
                                        <div style="font-size: 14px;color:#999999;">获得&nbsp; 0 &nbsp;个好评</div>
                                        <div style="margin-left: auto;margin-top: -2%;"><nut-button
                                                style="white-space: nowrap;padding: 0 20rpx;font-size: 20rpx;"
                                                color="#21C38F" size="mini"
                                                @click="selPeople(item, index)">选择Ta</nut-button>
                                        </div>
                                    </div>
                                </nut-row>
                            </nut-col>
                        </nut-row> -->
                    </div>
                </div>
            </div>
        </nut-popup>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter, useReachBottom } from '@tarojs/taro';
import { useShareAppMessage } from '@tarojs/taro';
import { Left, Right, StarFillN } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted, ref } from 'vue';
import { format } from './../../../../utils/index'
import { BASE_URL } from './../../../../utils/index'
import { getServiceDetail, getUserListById, getCommontList, getPageTypeList, getRandNum } from '../../../../api/index'
export default {
    components: {
        Left,
        Right,
        StarFillN
    },
    setup() {
        useShareAppMessage((res) => {
            if (res.from === 'button') {
                // 来自页面内转发按钮
                //console.log(res.target)
            }
            return {
                title: data.detail.project_Name + '',
                path: '/pages/index/index',
                imageUrl: data.detail.remark
            }
        })
        const data = reactive({
            value: 4.5,
            list: [
                'https://cxj.szzkba.cn/upload/i/2024/09/26/101614.png',
                'https://cxj.szzkba.cn/upload/i/2024/09/26/101614.png',
                'https://cxj.szzkba.cn/upload/i/2024/09/26/101614.png',
            ],
            detail: {
                prj_info: ''
            },
            val: 1,
            tab: 0,
            showBottom: false,
            serviceList: [
                {
                    name: '钟点服务'
                },
                // {
                //     name: '按周服务'
                // },
                // {
                //     name: '按月服务'
                // }
            ],
            showPreview: false,
            imgData: [],
            serviceActive: -1,
            mealList: [],
            mealActive: -1,
            num: 1,
            id: '',
            peopleList: [] as any,
            peopleActive: -1,
            peopleBottom: false,
            currentUser: {},
            client_ID: '',
            price: 0,
            mini_Amount: 0,
            mini_Count: 1,
            commontList: [],
            token: '',
            PageSize: 2,
            Page: 1,
            typeList: [],
            orderServiceContent: {},
            formRef: null,
            uploadUrl: BASE_URL + '/fileUploadAndDownload/uploadPublic',
            fileList: [],
            inputA: [],
            uploadA: [],
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.id) {
                data.id = router.params.id
                getDetail(router.params.id)
                getUserAllList(router.params.id)
                getCommonts(router.params.id)
                getPageTypeList({ pageId: router.params.id }).then(res => {
                    if (res.code == 0) {
                        data.typeList = res.data.list
                        let list = res.data.list, inputA = [] as any, uploadA = [] as any
                        // list.forEach(item => {
                        //     if (item.colType == 'text') {
                        //         inputA.push(item)
                        //     } else if (item.colType == 'image') {
                        //         uploadA.push(item)
                        //     }
                        // })
                        for (var i = 0; i < list.length; i++) {
                            if (list[i].colType == 'text') {
                                inputA.push(list[i])
                            } else if (list[i].colType == 'image') {
                                uploadA.push(list[i])
                            }
                        }
                        data.inputA = inputA
                        data.uploadA = uploadA
                    }
                })
            }
            Taro.getStorage({
                key: 'token',
                success: function (res) {
                    data.token = res.data
                }
            })
        })
        useReachBottom(() => {
            console.log("下拉刷新")
            data.Page++
            getCommonts(data.id)
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        const onChange = (index) => {
            data.val = index + 1
        }
        const selService = (item, index) => {
            data.serviceActive = index
        }
        const selMeal = (item, index) => {
            data.mealActive = index
            data.client_ID = item.ID
            data.num = Number(item.mini_Count)
            data.mini_Amount = item.mini_Amount
            data.mini_Count = item.mini_Count
            if (data.currentUser.level) {
                data.price = Number(item.mini_Amount) * Number(data.currentUser.level) * data.num
            } else {
                data.price = Number(item.mini_Amount) * data.num
            }
        }
        const picSucc = (imgData, item) => {
            console.log(JSON.parse(imgData.data.data).data.file.url)
            data.orderServiceContent[item.typeCol] = BASE_URL + '/' + JSON.parse(imgData.data.data).data.file.url
        }
        // 失去焦点校验
        const customBlurValidate = (prop) => {
            console.log("33333333333333")
            console.log(prop)
            data.formRef?.validate(prop).then(({ valid, errors }) => {
                if (valid) {
                    console.log('success:', data.orderServiceContent)
                } else {
                    console.warn('error:', errors)
                }
            })
        };
        const selPeople = (item, index) => {
            data.peopleActive = index
            data.currentUser = data.peopleList[index]
            data.price = Number(data.mini_Amount) * Number(item.level) * data.num
            data.peopleBottom = false
        }
        const showPeople = () => {
            if (data.token) {
                getUserAllList(data.id)
                data.peopleBottom = true
            } else {
                Taro.showModal({
                    title: '请登录',
                    content: '登录后体验更好的服务',
                    showCancel: false,
                    success: function (res) {
                        Taro.reLaunch({
                            url: '/packageA/pages/mypage/index'
                        })
                    }
                })
            }
        }
        const changeNum = (val) => {
            data.num = val
            if (data.currentUser.level) {
                data.price = Number(data.mini_Amount) * Number(data.currentUser.level) * data.num
            } else {
                data.price = Number(data.mini_Amount) * data.num
            }
        }
        const selCategory = () => {
            data.showBottom = true
        }
        const selThali = () => {
            data.showBottom = true
        }
        const getDetail = (id) => {
            getServiceDetail({ ID: id }).then(res => {
                if (res.code == 0) {
                    data.detail = res.data.repageSetting
                    data.detail.prj_info = formatImg(res.data.repageSetting.prj_info)
                    data.mealList = res.data.repageSetting.ProjectSecs
                    data.price = res.data.repageSetting.mini_Amount
                    const router = useRouter();
                    if (router.params.mealActive) {
                        data.mealActive = Number(router.params.mealActive)
                        data.client_ID = res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].ID
                        data.num = Number(res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].mini_Count)
                        data.mini_Amount = res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].mini_Amount
                        data.mini_Count = res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].mini_Count
                        if (data.currentUser.level) {
                            data.price = Number(res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].mini_Amount) * Number(data.currentUser.level) * data.num
                        } else {
                            data.price = Number(res.data.repageSetting.ProjectSecs[Number(router.params.mealActive)].mini_Amount) * data.num
                        }
                    }
                }
            })
        }
        const formatImg = (html) => {
            var newContent = html.replace(/<img[^>]*>/gi, (match) => {
                let processed = null;
                if (!match.match(/style=\"(.*)\"/gi)) {
                    processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
                } else {
                    processed = match.replace(/style=\"(.*)\"/gi, 'style="width:100%;height:auto;display:block"');
                }
                return processed;
            });
            return newContent;
        }
        const toOrder = () => {
            // if (data.currentUser.ID && data.mealActive >= 0) {
            //     jumpTo('/packageA/pages/subOrder/index?server_id=' + data.id + '&server_User_Id=' + data.currentUser.user_ID + '&client_ID=' + data.client_ID + '&mealIndex=' + data.mealActive + '&num=' + data.num + '&orderServiceContent=' + JSON.stringify(data.orderServiceContent))
            // } else if (data.mealActive == -1) {
            //     Taro.showToast({
            //         title: '请选择服务套餐',
            //         icon: 'error',
            //         duration: 2000
            //     })
            // } else {
            //     Taro.showToast({
            //         title: '请选择服务人员',
            //         icon: 'error',
            //         duration: 2000
            //     })
            // }
            if (data.mealActive == -1) {
                Taro.showToast({
                    title: '请选择服务套餐',
                    icon: 'error',
                    duration: 2000
                })
            } else if (!data.currentUser.ID) {
                Taro.showModal({
                    title: '提示',
                    content: '未选择服务人员，系统将随机分配',
                    success: function (res) {
                        if (res.confirm) {
                            getRandNum({ ID: data.id }).then(res => {
                                if (res.code == 0) {
                                    jumpTo('/packageA/pages/subOrder/index?server_id=' + data.id + '&server_User_Id=' + res.data.userServerId + '&client_ID=' + data.client_ID + '&mealIndex=' + data.mealActive + '&num=' + data.num + '&orderServiceContent=' + JSON.stringify(data.orderServiceContent))
                                } else {
                                    Taro.showToast({
                                        title: res.msg,
                                        icon: 'none',
                                        duration: 2000
                                    })
                                }
                            })
                        }
                    }
                })
            } else if (data.currentUser.ID && data.mealActive >= 0) {
                jumpTo('/packageA/pages/subOrder/index?server_id=' + data.id + '&server_User_Id=' + data.currentUser.user_ID + '&client_ID=' + data.client_ID + '&mealIndex=' + data.mealActive + '&num=' + data.num + '&orderServiceContent=' + JSON.stringify(data.orderServiceContent))
            }
        }
        const getUserAllList = (id) => {
            getUserListById({ ID: id }).then(res => {
                if (res.code == 0) {
                    let list = res.data.userDetails
                    list.forEach(item => {
                        item.show = false
                    })
                    data.peopleList = list
                    const router = useRouter();
                    if (router.params.index) {
                        data.peopleActive = Number(router.params.index)
                        data.currentUser = data.peopleList[Number(router.params.index)]
                        data.price = Number(data.mini_Amount) * Number(data.peopleList[Number(router.params.index)].level) * data.num
                    }
                }
            })
        }
        const submitOrder = () => {
            // console.log(data.orderServiceContent)
            data.showBottom = false
        }
        const getCommonts = (id) => {
            getCommontList({ pageId: id, PageSize: data.PageSize, Page: data.Page }).then(res => {
                if (res.code == 0) {
                    let list = res.data.list
                    list.forEach(item => {
                        if (item.shareType == '1') {
                            item.shareUrl = item.shareUrl.split(',')
                        }
                        item.CreatedAt = format(item.CreatedAt)
                    })
                    data.commontList = list
                }
            })
        }
        const showFn = (item) => {
            let list = item.shareUrl, arr = []
            list.forEach(item => {
                arr.push({ src: item })
            })
            data.imgData = arr
            data.showPreview = true
        }

        const hideFn = () => {
            data.showPreview = false
        }
        const open = (index) => {
            data.peopleList[index].show = !data.peopleList[index].show
        }
        return {
            ...toRefs(data), open, submitOrder, formatImg, picSucc, customBlurValidate, showFn, hideFn, jumpTo, onChange, selService, selMeal, changeNum, getDetail, selCategory, selThali, toOrder, selPeople, showPeople, getUserAllList, getCommonts
        }
    }
};
</script>


<style lang="scss">
.detail-box {
    .nut-swiper-pagination {
        .h5-i {
            border-radius: 50% !important;
            height: 16rpx !important;
        }
    }

    .sub-btn {
        width: calc(100% - 40rpx) !important;
        margin: 20rpx auto;
        position: fixed;
        bottom: 0;
        left: 20rpx;
        border-radius: 10rpx !important;
    }

    .swiper-pagination {
        position: absolute;
        bottom: 10rpx;
        right: 0;
        width: 80rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.33);
        border-radius: 20rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
    }

    .nut-button {
        margin: 20rpx auto 20rpx;
        border-radius: 10rpx;
    }

    .dialog-box {
        padding: 30rpx 30rpx 0;

        .type-list {
            .nut-cell-group__wrap {
                box-shadow: none;
            }

            .type-title {
                font-size: 24rpx;
                font-weight: bold;
                margin: 30rpx 0 20rpx;
                color: #0E1032;
            }
        }

        .select-people {
            .people-title {
                font-size: 32rpx;
                font-weight: bold;
                color: #070A2D;
                margin-bottom: 20rpx;
            }

            .people-item {
                margin-bottom: 20rpx;
                background: #FAF9F7;
                border-radius: 10rpx;
                padding: 20rpx;

                .people-box {
                    .img {
                        img {
                            width: 80rpx;
                            height: 80rpx;
                            border-radius: 50%;
                            margin-right: 15rpx;
                        }
                    }

                    .name {
                        color: #272947;
                        font-weight: bold;
                        font-size: 24rpx;
                        margin-right: 20rpx;
                    }

                    .num {
                        font-size: 22rpx;
                        color: #9C9CA8;
                    }
                }
            }

            .btn-box {
                position: relative;
                padding-bottom: 65rpx;

                .nut-button {
                    border-radius: 10rpx;
                    position: absolute;
                    right: 0;
                }
            }
        }

        .title {
            font-size: 32rpx;
            font-weight: bold;
            color: #070A2D;
        }

        .user-info-box {
            background: #F9F1E6;
            border-radius: 10rpx;
            color: #F2BB6B;
            font-size: 20rpx;
            display: flex;
            padding: 20rpx;
            width: 87%;
            margin: 10rpx 0 0 13%;
            box-sizing: border-box;

            .user-info {
                width: 90%;
                box-sizing: border-box;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 10rpx;
                // display: flex;
                // align-items: center;
                // color: #F2BB6B;
                // display: -webkit-box;
                // -webkit-line-clamp: 2;
                // -webkit-box-orient: vertical;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // font-size: 20rpx;
                // width: 80%;

            }

            span {
                font-size: 20rpx;
                color: #A69E93;
            }

            .user-info.active {
                white-space: normal !important;
                overflow: auto !important;
            }
        }

        .user-info-box.active {
            display: block !important;
        }

        .product {
            margin: 20rpx 0;
            background: #F5F4F0;
            border-radius: 10rpx;
            padding: 5rpx 20rpx;

            img {
                width: 80rpx;
                height: 80rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .name {
                font-size: 26rpx;
                color: #222443;
            }

            .price {
                color: #111435;
                font-size: 30rpx;
                font-weight: bold;
            }
        }

        .service {
            .ser-title {
                font-size: 24rpx;
                font-weight: bold;
                margin: 30rpx 0 20rpx;
                color: #0E1032;
            }

            .ser-list {
                .ser-item {
                    display: inline-block;
                    width: 32%;
                    text-align: center;
                    box-sizing: border-box;
                    height: 70rpx;
                    line-height: 70rpx;
                    border: 2rpx solid #F5F5F5;
                    background: #F5F5F5;
                    margin-bottom: 20rpx;
                    border-radius: 5rpx;
                    font-size: 26rpx;
                    white-space: nowrap;
                    color: #262845;
                }

                .ser-item:nth-child(3n+2) {
                    margin: 0 2% 20rpx;
                }

                .ser-item.active {
                    background: #FDF6EC;
                    border-color: #F0A93F;
                    color: #262845;
                }
            }
        }

        .meal {
            .meal-title {
                font-size: 24rpx;
                font-weight: bold;
                margin: 20rpx 0;
                color: #0E1032;
            }

            .meal-list {
                .meal-item {
                    display: inline-block;
                    width: 49%;
                    text-align: center;
                    box-sizing: border-box;
                    height: 70rpx;
                    line-height: 70rpx;
                    border: 2rpx solid #F5F5F5;
                    background: #F5F5F5;
                    margin-bottom: 20rpx;
                    border-radius: 5rpx;
                    font-size: 26rpx;
                    white-space: nowrap;
                    color: #262845;
                }

                .meal-item:nth-child(even) {
                    margin: 0 0 20rpx 2%;
                }

                .meal-item.active {
                    background: #FDF6EC;
                    border-color: #F0A93F;
                    color: #262845;
                }
            }
        }

        .add-num {
            padding-top: 30rpx;

            div {
                font-size: 26rpx;
                font-weight: bold;
                color: #0E1032;
                margin-bottom: 20rpx;
            }
        }
    }

    .content {
        padding: 20rpx;
        background: #fff;
        margin-bottom: 10rpx;

        .nut-tab-pane {
            padding: 0 20rpx 40rpx 20rpx !important;
        }

        .nut-tabs__titles-item__line {
            width: 40rpx !important;
            background: #F0A93F !important;
        }

        .detail-title {
            font-size: 26rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }

        .detail-content {
            font-size: 24rpx;
            color: #565870;
        }

        .title {
            .left {
                .nut-price {
                    color: #F03107;
                    margin-right: 20rpx;
                    font-weight: bold;
                }

                .nut-price--strike {
                    color: #999;
                }
            }

            .num {
                color: #666;
            }
        }

        .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #252747;
        }

        .info {
            color: #666;
            font-size: 26rpx;
        }

        .rows {
            .sort {
                font-size: 28rpx;
                width: 30%;
                color: #6E6F83;

                img {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
            }

            .server {
                width: 70%;

                span {
                    color: #111435;
                    font-size: 28rpx;
                    font-weight: bold;
                }

                .head-img {
                    font-size: 24rpx;

                    img {
                        width: 50rpx;
                        height: 50rpx;
                        border-radius: 50%;
                        margin-right: 10rpx
                    }
                }
            }
        }

        .evaluate {
            margin-bottom: 20rpx;

            .sort {
                font-size: 28rpx;
                width: 70%;
            }

            .server {
                width: 30%;
                white-space: nowrap;

                span {
                    color: #666;
                    font-size: 26rpx;
                }

            }
        }

        .eval-list {
            padding-bottom: 80rpx;

            .eval-item {
                margin-bottom: 10rpx;
                border-bottom: 1rpx solid #F2ECEC;

                .head {
                    .avatar {
                        width: 60%;
                        font-size: 24rpx;
                        height: 80rpx !important;

                        .nick {
                            color: #212443;
                        }

                        img {
                            width: 50rpx;
                            height: 50rpx;
                            border-radius: 50%;
                            margin-right: 20rpx;
                        }
                    }

                    .time {
                        width: 40%;
                        color: #A8A8A8;
                        font-size: 24rpx;
                        text-align: right;
                    }
                }

                .spec {
                    color: #9D9EAA;
                    font-size: 24rpx;
                    margin: 10rpx 0;

                    div:first-child {
                        margin-right: 40rpx;
                    }
                }

                .box {
                    padding-bottom: 20rpx;

                    .text {
                        color: #2D2F4D;
                        font-size: 24rpx;
                        height: 50rpx;
                    }

                    .star {
                        margin: 0 0 20rpx;

                        .nut-rate-item {
                            margin-right: 8rpx !important;
                        }
                    }

                    .imgs {
                        img {
                            width: 49%;
                            border-radius: 10rpx;
                        }

                        img:nth-child(odd) {
                            margin-right: 2%;
                        }
                    }
                }
            }
        }
    }
}

.avatar {
    position: relative;
    width: 100%;
    height: 180px;
}

.avatarImage1 {
    .nut-badge {
        white-space: nowrap;
        position: absolute;
        left: 60rpx;
        top: 60rpx;
    }
}

.status {
    width: 100rpx;
    text-align: center;
    background: rgba($color: #000000, $alpha: 0.4);
    color: #4CE9C3;
    border-radius: 20px 0 20px 0;
    position: absolute;
    left: 20rpx;
    top: 35rpx;
    white-space: nowrap;
    font-size: 22rpx;
    z-index: 999;
}

.status span {
    display: inline-block;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #4CE9C3;
    margin-right: 10rpx;
}

.level {
    span {
        font-size: 20rpx;
        margin-left: 5rpx;
        text-align: center;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
        padding-left: 10rpx !important;
        background: #6574AB;
        color: #EBF7FF;
        padding: 0 10rpx;
        border-radius: 4rpx;

    }

    .c1 {
        background: #6574AB;
    }

    .c2 {
        background: #007DC4;
    }

    .c3 {
        background: #7B1DD3;
    }

    .c4 {
        background: #EB5B00;
    }

    .c5 {
        background: #FD5131;
    }

    .c6 {
        background: #F61C36;
    }

    img {
        width: 45rpx;
        height: 45rpx;
    }

    .info {
        display: inline-block;
        width: 92%;
        border-radius: 10rpx;
        background: #F5F5F5;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        text-align: center;
    }


}
</style>